import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { Table, Row, Col } from 'antd';
import moment from 'moment';

import StockTickChart from './StockTickChart';
import StockKlineChart from './StockKlineChart';

import './closeOrderReport.less';

function formatTime(v) {
  return moment(v).format('YYYY-MM-DD HH:mm:ss');
}

const mapStateToProps = state => ({
  closeOrder: state.closedPositions.closeOrder,
  tickData: state.marketData.tickData,
  klineData: state.marketData.klineData,
  kline1min: state.marketData.kline1min,
});

const mapDispatchToProps = {
  getCloseOrder: query => ({
    type: 'closedPositions/getCloseOrder',
    payload: query || {},
  }),
  getTickData: query => ({
    type: 'marketData/getTickData',
    payload: query || {},
  }),
  getKline1min: query => ({
    type: 'marketData/getKline1min',
    payload: query || {},
  }),
  getKlineData: query => ({
    type: 'marketData/getKlineData',
    payload: query || {},
  }),
};

@connect(mapStateToProps, mapDispatchToProps)
export default class CloseOrderReport extends Component {
  static propTypes = {
    orderInfo: PropTypes.object.isRequired,
  }
  componentDidMount() {
    const { orderInfo } = this.props;
    if (orderInfo != null) {
      this.getData(this.props);
    }
  }
  componentWillReceiveProps(nextProps) {
    const { orderInfo } = nextProps;
    if (orderInfo != null && nextProps.orderInfo != this.props.orderInfo) {
      this.getData(nextProps);
    }
  }
  getData({ orderInfo, getCloseOrder, getTickData, getKline1min, getKlineData }) {
    const { trader, symbol, closeOrderId, openTime, closeTime } = orderInfo;
    getCloseOrder({ trader, symbol, orderId: closeOrderId });

    const timeDiff = closeTime - openTime;
    if (timeDiff < 0) {
      return false;
    } else if (timeDiff < 86400000) {
      const from = moment(openTime).format('YYYYMMDD000000');
      const to = moment(closeTime).format('YYYYMMDD235959');
      // getTickData({ stockCode: symbol, from, to });
      // getTickData({ stockCode: symbol, from: 20170725000000, to: 20170725235959 });

      // const from = moment(openTime).add(-30, 'minutes').format('YYYYMMDDHHmmss');
      // const to = moment(closeTime).add(30, 'minutes').format('YYYYMMDDHHmmss');
      getKline1min({ stockCode: symbol, from, to });
    } else {
      const from = moment(openTime).add(-10, 'days').format('YYYYMMDD');
      const to = moment(closeTime).add(10, 'days').format('YYYYMMDD');
      getKlineData({ stockCode: symbol, from, to });
    }
  }
  renderClosedPosition = closedPositions => closedPositions.map((item, i) => {
    if (item.tradeType == 'Buy') {
      return (
        <div>
          <p>{formatTime(item.openTime)} <span style={{ color: 'red' }}>买入</span> <strong>{item.buyPrice.toFixed(2)}</strong> &nbsp;&nbsp;&nbsp;&nbsp;
            {formatTime(item.closeTime)} <span style={{ color: 'green' }}>卖出</span> <strong>{item.sellPrice.toFixed(2)}</strong> &nbsp;&nbsp;&nbsp;&nbsp;
                数量: {item.quantity}</p>
          <p />
        </div>
      );
    }
    return (
      <div>
        <p>{formatTime(item.openTime)} 卖出 <strong>{item.sellPrice.toFixed(2)}</strong> &nbsp;&nbsp;&nbsp;&nbsp;
          {formatTime(item.closeTime)} 买入 <strong>{item.buyPrice.toFixed(2)}</strong> &nbsp;&nbsp;&nbsp;&nbsp;
                数量: {item.quantity}</p>
        <p />
      </div>
    );
  })
  render() {
    const { orderInfo, closeOrder, tickData, kline1min, klineData } = this.props;
    let order = null;
    let closedPositions = null;

    if (closeOrder && closeOrder.order) {
      order = closeOrder.order;
      closedPositions = closeOrder.closedPositions;
    }

    return (
      <div>
        <Row>
          <Col span={18}>
            {tickData != null && <StockTickChart tickData={tickData} orderInfo={orderInfo} closeOrder={closeOrder} />}
            {kline1min != null && <StockKlineChart serieName="分K" klineData={kline1min} orderInfo={orderInfo} closeOrder={closeOrder} />}
            {klineData != null && <StockKlineChart serieName="日K" klineData={klineData} orderInfo={orderInfo} closeOrder={closeOrder} />}
          </Col>
          <Col span={6}>
            {order && <div className="closeOrderInfo">
              <h3>订单信息</h3>
              <p><label>单号</label><em>{order.orderId}</em></p>
              <p><label>类型</label><em>{({ Buy: '买入', Sell: '卖出' })[order.tradeType]}</em></p>
              <p><label>价格</label><em>{order.price.toFixed(2)}</em></p>
              <p><label>数量</label><em>{order.quantity}</em></p>
              <p><label>费用</label><em>{order.fee.toFixed(4)}</em></p>
              <p><label>时间</label><em>{formatTime(order.time)}</em></p>
            </div>}
          </Col>
        </Row>
        <Row>
          {closedPositions != null && this.renderClosedPosition(closedPositions)}
        </Row>
      </div>
    );
  }
}

